<template>
  <!-- 搜索页面 -->
  <div class="searchContainer">
    <!-- 头部搜索框 -->
    <div class="header">
      <div class="search">
        <input
          class="searchInput"
          type="text"
          v-model="searchValue"
          @keyup.enter="toSearch"
        />
        <span class="el-icon-search searchIcon" @click="toSearch"></span>
      </div>
    </div>
    <!-- 内容区列表 -->
    <div class="content">
      <!-- 导航页 -->
      <div class="nav">
        <div
          :class="currentType === '单曲' ? 'active' : ''"
          @click="typeSelect('单曲')"
        >
          单曲
        </div>
        <div
          :class="currentType === '歌单' ? 'active' : ''"
          @click="typeSelect('歌单')"
        >
          歌单
        </div>
        <div
          :class="currentType === 'MV' ? 'active' : ''"
          @click="typeSelect('MV')"
        >
          MV
        </div>
      </div>
      <div class="action_area">
        <span
          >搜索到<span class="searchText">“{{ searchText }}”</span
          >相关的歌曲</span
        >
        <el-button
          v-show="currentType === '单曲'"
          class="play"
          icon="el-icon-video-play"
          type="primary"
          >播放</el-button
        >
      </div>
      <!-- 内容展示页 -->
      <!-- 单曲展示 -->
      <el-table
        v-show="currentType === '单曲'"
        :data="searchMusicList"
        tooltip-effect="dark"
        style="width: 100%"
        @row-click="toPlayMusic"
      >
        <el-table-column type="selection" width="60"> </el-table-column>
        <el-table-column label="歌曲名" width="510" v-slot="{ row }">
          {{ musicName(row) }}
        </el-table-column>
        <el-table-column label="专辑" width="280" v-slot="{ row }"
          >《{{ row.album.name }}》
        </el-table-column>
        <el-table-column label="时长" align="right" v-slot="{ row }"
          >{{ durationTime(row.duration) }}
        </el-table-column>
      </el-table>
      <!-- 歌单展示 -->
      <div class="playList" v-show="currentType === '歌单'">
        <div class="playList-title">
          <div class="playName">歌单名</div>
          <div class="playauthor">创建人</div>
          <div class="collet">收藏</div>
        </div>
        <ul class="playList-content">
          <li class="playList-item" v-for="item in playList" :key="item.id">
            <img class="itemImg" :src="item.coverImgUrl" alt="" />
            <div class="itemTitle">{{ item.name }}</div>
            <div class="itemName">{{ item.creator.nickname }}</div>
            <div class="colletNum">
              {{ Math.floor(item.bookCount / 10000) }}万
            </div>
          </li>
        </ul>
      </div>
      <!-- MV展示 -->
      <div class="download">
        <span>查看更多内容，请下载客户端 </span>
        <el-button type="primary">立即下载</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { gfRequest } from "../../utils/gfRequest";

export default {
  name: "Search",
  data() {
    return {
      searchValue: "",
      playList: [],
      mvList: [],
      currentType: "单曲",
    };
  },
  computed: {
    ...mapState("search", ["searchText", "searchMusicList"]),
  },
  methods: {
    ...mapActions("search", ["getMusicList"]),
    ...mapMutations("search", ["UPDATESEARCHTEXT"]),
    musicName(value) {
      const str = value.artists[0].name + "-" + value.name;
      return str;
    },
    durationTime(value) {
      let min = Math.floor(value / 1000 / 60);
      let secend = Math.floor((value / 1000) % 60);
      if (min < 10) {
        min = "0" + min;
      }
      if (secend < 10) {
        secend = "0" + secend;
      }
      return min + ":" + secend;
    },
    toPlayMusic(row) {
      this.$router.push(`/musicplayer?id=${row.id}`);
    },
    toSearch() {
      const { searchValue, getMusicList, UPDATESEARCHTEXT } = this;
      if (!searchValue) return;
      this.playList = [];
      this.currentType = "单曲";
      UPDATESEARCHTEXT(searchValue);
      getMusicList(`/search?keywords=${searchValue || "许嵩"}&limit=20`);
    },
    async typeSelect(type) {
      this.currentType = type;
      if (type === "单曲") {
        console.log(1);
      } else if (type === "歌单") {
        if (this.playList.length) return;
        const response = await gfRequest(
          `/search?keywords=${this.searchValue || "许嵩"}&limit=20&type=1000`
        );
        this.playList = response.data.result.playlists;
      } else if (type === "MV") {
        console.log(2);
      }
    },
  },
  watch: {
    searchText(newValue) {
      this.searchValue = newValue;
    },
  },
  mounted() {
    this.searchValue = this.searchText;
  },
};
</script>

<style scoped>
/* 搜索框样式 */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 120px;
  background-color: #f8f8f8;
}
.search {
  position: relative;
  width: 500px;
  height: 42px;
}
.searchInput {
  width: 498px;
  height: 40px;
  outline: none;
  padding-left: 20px;
  border: 1px solid #ccc;
}
.searchIcon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* 内容区样式 */
.content {
  width: 1000px;
  margin: 0 auto;
}
.nav {
  height: 60px;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
}
.nav div {
  text-align: center;
  line-height: 57px;
  width: 100px;
  height: 57px;
  cursor: pointer;
}
.nav div:hover {
  color: #14a9ff;
}
.nav div.active {
  border-bottom: 2px solid #14a9ff;
  color: #14a9ff;
}
.action_area {
  margin: 20px 0 5px;
  height: 36px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.action_area .play {
  height: 36px;
  font-size: 16px;
}
.action_area .searchText {
  color: #14a9ff;
}
.download {
  width: 1000px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
/* 歌单样式 */
.playList {
  width: 1000px;
}
.playList-title {
  width: 100%;
  height: 54px;
  line-height: 54px;
  display: flex;
  color: #999;
  font-size: 14px;
  background-color: #f8f8f8;
}
.playList-title .playName {
  width: 560px;
  padding-left: 20px;
}
.playList-title .playauthor {
  width: 340px;
}
.playList-title .collet {
  width: 50px;
  padding: 0 10px 0 40px;
  text-align: center;
}
.playList-content {
  list-style: none;
  padding: 0;
  margin: 0;
}
.playList-item {
  width: 980px;
  height: 50px;
  line-height: 50px;
  padding: 10px 0 10px 20px;
  display: flex;
}
.playList-item .itemImg {
  width: 50px;
  height: 50px;
}
.playList-item .itemTitle {
  width: 480px;
  padding-left: 16px;
  color: #333;
}
.playList-item .itemName {
  width: 333px;
  padding-left: 25px;
  color: #333;
}
.playList-item .colletNum {
  width: 81px;
  padding: 0 10px 0 30px;
  text-align: end;
  color: #999;
}
</style>